<template>
    <div>
        <van-nav-bar title="医院详细信息" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="hospitalcontent">
            <div class="top">
                <div class="topleftcontent">
                    <h4>{{datainformation.name}}</h4>
                    <div>所属区：{{datainformation.address}}</div>
                    <div>热线电话：<a :href="'tel:' + datainformation.phone" rel="external nofollow" >{{datainformation.phone}}</a></div>
                </div>
                <div class="hospitalimg">
                    <img :src="datainformation.url" alt="">
                </div>
            </div>
            <div style="padding:0 12px;">
                <div id="allmap" class="map"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { BMPGL } from "./baidumap.js"
export default {
    data(){
        return{
            ak: 'y2kKYDf0RGfTPwy9vqXaiXGBDhABVG7z',
            datainformation:{},
            center: { lng: 0, lat: 0 }, //经纬度
            zoom: 15 //地图展示级别
        }
    },
    created(){
        this.$store.state.showBottomNav = false;
        
    },
    mounted(){
        this.datainformation = this.$route.params
        this.initMap()
    },
    methods:{
        callPhone (phoneNumber) {
                window.location.href = 'tel://' + phoneNumber
                },
        onClickLeft() {
            this.$router.go(-1);
            this.$store.state.showBottomNav = true;
        },
        initMap() {
            // var marker = new BMapGL.Marker(point,{icon:new BMapGL.Icon("../assets/baidu_dw.png", new BMapGL.Size(30, 55))}); 可自定义图标icon
            // 传入密钥获取地图回调。
            BMPGL(this.ak).then((BMapGL) => {
                var jwd = this.datainformation.jwd;
                var map = new BMapGL.Map('allmap');
                var point = new BMapGL.Point(jwd[0], jwd[1]);
                map.centerAndZoom(point, 16);
                // 创建点
                var marker = new BMapGL.Marker(point);
                 map.addOverlay(marker)
            }).catch((err)=>{
                console.log(err)
            })
        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #0d9df0;
}
/deep/ .van-nav-bar .van-icon {
  color: #ffffff;
}
/deep/ .van-nav-bar__text {
  color: #ffffff;
}
/deep/ .van-nav-bar__title {
  color: #ffffff;
}
.hospitalimg{
    width: 30%;
    img{
        width: 100%;
        height: 100%;
    }
}
.map {
  width: 100%;
  height: 220px;
}
.allmap {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.top{
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    margin: 12px 0;
    .topleftcontent{
        
        h4{
            line-height: 40px;
            padding: 0;
            margin: 0;
        }
    }
}
</style>